<template>

  <div class="app-container">
    <div class="terminal">
      <div class="" style="display: flex;justify-content: space-between;align-items: flex-end">
        <div class="title">
          <span class="bar"></span>
          <span class="text">终端交易汇总</span>
        </div>
        <div>
          <el-button type="primary" icon="Download">导出</el-button>
        </div>
      </div>
      <el-divider/>
      <el-form ref="queryRef" :inline="true" label-width="100px">
        <div>

          <el-form-item label="日期: ">
            <el-radio-group label="size control">
              <el-radio-button label="large">今天</el-radio-button>
              <el-radio-button label="large">昨天</el-radio-button>
              <el-radio-button label="default">近3天</el-radio-button>
              <el-radio-button label="small">近7天</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-date-picker end-placeholder="结束日期" range-separator="-" start-placeholder="开始日期" type="daterange"
                            value-format="YYYY-MM-DD"/>
          </el-form-item>
        </div>


        <el-form-item label="平台交易号" prop="dealNo">
          <el-input placeholder="请输入平台交易号" clearable/>
        </el-form-item>
        <el-form-item label="平台终端号" prop="dealNo">
          <el-input placeholder="请输入平台终端号" clearable/>
        </el-form-item>
        <el-form-item label="合作伙伴号" prop="payStatus">
          <el-select v-model="value" class="m-2" placeholder="请选择" size="large">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="Document">查询</el-button>
        </el-form-item>
      </el-form>
      <div class="merchant_1">
        <div class="merchant_2" style="border-right: 1px dashed #ddd;">
          <div class="merchant_3">交易总金额(元)</div>
          <div class="merchant_3" style="font-size: 26px;color: rgb(79, 201, 176);">0.00</div>
        </div>
        <div class="merchant_2" style="border-right: 1px dashed #ddd;">
          <div class="merchant_3">交易总笔数(笔)</div>
          <div class="merchant_3" style="font-size: 26px;color: rgb(123, 201, 249);">0.00</div>
        </div>
        <div class="merchant_2" style="border-right: 1px dashed #ddd;">
          <div class="merchant_3">笔均金额(元)</div>
          <div class="merchant_3" style="font-size: 26px;color: rgb(123, 201, 249);">0.00</div>
        </div>
        <div class="merchant_2">
          <div class="merchant_3">交易总手续费(元)</div>
          <div class="merchant_3" style="font-size: 26px;color: rgb(79, 201, 176);">0.00</div>
        </div>
      </div>
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column prop="date" label="序号" width="180">
        </el-table-column>
        <el-table-column prop="name" label="合作伙伴" width="180">
        </el-table-column>
        <el-table-column prop="address" label="平台商户号" width="180">
        </el-table-column>
        <el-table-column prop="name" label="商户名称" width="180">
        </el-table-column>
        <el-table-column prop="money" label="金额">
          <template #default>
            <span style="color: #ff6600;">￥500</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="笔数">
        </el-table-column>
        <el-table-column prop="money" label="手续费">
          <template #default>
            <span style="color: #ff6600;">￥500</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="demo-pagination-block">
        <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" background
                       :page-sizes="[5, 10, 20, 50]" :small="small" :disabled="disabled"
                       layout="total, sizes, prev, pager, next, jumper" :total="4" @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"/>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref} from 'vue'

const value = ref('')

const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  }
]
const currentPage4 = ref(4)
const pageSize4 = ref(5)
const small = ref(false)
const disabled = ref(false)
const tableData = [
  {
    date: '2016-05-01',
    name: '3',
    address: '125346',
    money: '￥500.00'
  },
  {
    date: '2016-05-02',
    name: '2',
    address: '342189',
    money: '￥500.00'
  },
  {
    date: '2016-05-03',
    name: '2',
    address: '766589',
    money: '￥500.00'
  },
  {
    date: '2016-05-04',
    name: '1',
    address: '454189',
    money: '￥500.00'
  },
]
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
</script>

<style scoped lang="scss">
.terminal {
  margin: 10px;

  .title {
    display: flex;
    align-items: center;
    padding-top: 16px;
    padding-left: 16px;

    .bar {
      width: 4px;
      height: 20px;
      background-color: #409eff;
      margin-right: 10px;
    }

    .text {
      font-size: 16px;
      color: #333;
    }
  }

  .merchant_1 {
    width: 100%;
    height: 110px;
    background: beige;
    border-bottom: 1px dashed #ddd;
    margin: 10px 0;
    border-top: 1px dashed #ddd;
    background: #fafafa;
    display: flex;

    .merchant_2 {
      flex: 25%;
      display: flex;
      flex-direction: column;
      align-items: center;
      align-content: center;
      justify-content: center;
      margin: 10px 0;
    }

    .merchant_3 {
      display: block;
      height: 30px;
      margin-bottom: 5px;
      font-size: 14px;
      line-height: 20px;
      font-weight: 400;
      color: #666;
    }
  }

  .demo-pagination-block {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }

}
</style>